<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body,
        html {
            height: 100%;
        }

        .parallax1 {
            background-image: url('img/Tesla\ \(19\).jpeg');
            height: 100%;
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }

        .parallax2 {
            background-image: url('img/Tesla\ \(14\).jpeg');
            height: 100%;
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }

        .parallax3 {
            background-image: url('img/Tesla\ \(17\).jpeg');
            height: 100%;
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }
    </style>
</head>

<body>

    <h1>视差效果</h1>
    <h1>  Parallax  视差  </h1>
    <h1>  不支持 safari  </h1>
    <pre>
    <h2>
    重点 css:
        height: 100%;
        background-attachment: fixed;


        支持 ie
        支持 ie


    </h2>
    </pre>

    <div class="parallax1"></div>

    <div style="height:1000px;background-color:greenyellow;font-size:36px">
        Scroll Up and Down this page to see the parallax scrolling effect.
        This div is just here to enable scrolling.
        Tip: Try to remove the background-attachment property to remove the scrolling effect.
    </div>

    <div class="parallax2"></div>

    <div style="height:1000px;background-color:red;font-size:36px">
        Scroll Up and Down this page to see the parallax scrolling effect.
        This div is just here to enable scrolling.
        Tip: Try to remove the background-attachment property to remove the scrolling effect.
    </div>

    <div class="parallax3"></div>

</body>

</html>